<template>
  <div class="app-container">

    <el-card>
      <div slot="header" class="clearfix">
        <span>
          <el-form :inline="true" :model="filters">
            <el-form-item label="请求路径">
              <el-input v-model="filters.requestUri" placeholder="请求路径" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="服务名">
              <el-input v-model="filters.serviceId" placeholder="服务名" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="请求方法">
              <el-input v-model="filters.method" placeholder="请求方法" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="响应码">
              <el-input v-model="filters.responseStatus" placeholder="响应码" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
              <el-form-item label="操作人">
              <el-input v-model="filters.userName" placeholder="操作人" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success"  icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>

        </span>
      </div>
      <div>
        <el-table stripe size="mini" fit border highlight-current-row :data="sysLog" element-loading-text="拼命加载中" height="580" v-loading="loading" style="width: 100%;">

          <el-table-column min-width="50" align="center" label="#">
            <template slot-scope="scope">
              {{scope.$index +1}}
            </template>
          </el-table-column>

          <el-table-column prop="requestUri" label="请求路径" min-width="200"  align="center">
          </el-table-column>
          <el-table-column  prop="serviceId" label="服务名" min-width="100" align="center">
          </el-table-column>

          <el-table-column prop="remoteAddr" label="客户端地址" width="120"  align="center">
          </el-table-column>
          <el-table-column prop="method" label="请求方法" width="100" align="center">
          </el-table-column>
          <el-table-column prop="responseStatus" label="响应码"  width="100" align="center">

          </el-table-column>
          <el-table-column show-overflow-tooltip prop="userAgent" label="客户端代理" min-width="150" align="center">
          </el-table-column>
          <el-table-column prop="executeTime" label="执行时间" width="100" align="center" sortable>

          </el-table-column>

          <el-table-column prop="userName" label="操作人" min-width="100"   align="center">

          </el-table-column>

          <el-table-column prop="createdTime" label="操作时间" min-width="160"   align="center">

          </el-table-column>

        </el-table>

        <el-row>
          <el-col style="margin-top: 13px">
            <div class="block">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="filters.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="filters.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filters.total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>

  </div>
</template>

<script>
  import {getLogListPage} from '@/api/config/log/';

  export default {
      name:'sysLogManage',
    data() {
      return {
        filters: {
          requestUri:'',
          serviceId:'',
          userName:'',
          responseStatus:'',
          method:'',
          page:1,
          total:0,
          limit:10,
        },
        loading: false,
        sysLog: [],

      }
    },
    methods: {

      handleSizeChange(val) {
        this.filters.limit = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.search();
      },
      handleSearch(){
        this.filters.total = 0;
        this.filters.page = 1;
        this.search();
      },
      //获取用户列表
      search: function () {
        let that = this;
        that.loading = true;
        getLogListPage(that.filters).then(function (response) {
         const result = response.data;
         that.sysLog= [];
         that.filters.total = result.data.totalCount;
          result.data.list.forEach((item) =>{
           that.sysLog.push(item);
         });
          that.loading = false;
        }).catch(function (error) {
          that.loading = false;
        });
      },

    },
    mounted() {
        this.search();
    }
  }
</script>

<style scoped>
</style>
